<#include "components/jmxUpload.ftl">
<#include "components/jmxAdd.ftl">
<script type="text/x-template" id="jmeter-main">
    <div>
        <div class="basic-container">
            <avue-crud :option="tableOption"
                       :data="tableData"
                       :table-loading="tableLoading"
                       :page="page"
                       ref="crud"
                       width="290"
                       @search-change="handleSearch"
                       @refresh-change="handleRefresh"
                       @size-change="handleSize"
                       @current-change="handleCurrent"
            >
                <template slot-scope="scope" slot="menuLeft">
                    <el-button type="primary" size="small" @click="uploadJmx()">上传JMX文件</el-button>
                    <el-button type="primary" size="small" @click="addJmx()">创建JMX测试用例</el-button>
                    <el-button type="success" size="small" @click="checkJmeterReady()">验证Jmeter安装可用</el-button>
                    <el-button type="success" size="small" @click="checkPhantomJsReady()">验证PhantomJs安装可用</el-button>
                    <el-button type="warning" size="small" @click="stopAll()">停止所有正在执行的任务</el-button>
                </template>
                <template slot-scope="scope" slot="menu">
                    <el-button type="primary" size="mini" @click.native="create(scope)">生成报告</el-button>
                    <el-button type="primary" size="mini" @click.native="edit(scope)">编辑</el-button>
                    <el-button type="primary" size="mini" @click.native="copy(scope)">复制</el-button>
                    <el-button type="success" size="mini" @click.native="downloadReport(scope)">下载报告</el-button>
                    <el-button type="info" size="mini" @click.native="previewPdf(scope)">查看报告</el-button>
                    <el-button type="info" size="mini" @click.native="getLog(scope)">查看执行信息</el-button>
                    <el-button type="warning" size="mini" @click.native="cancel(scope)">取消执行</el-button>
                    <el-button type="warning" size="mini" @click.native="remove(scope)">删除</el-button>
                </template>
            </avue-crud>
        </div>
        <batch-file-upload-dialog v-if="dialogProps.showUploadJmxDialog"
                                  @close="handleClose()"
        >

        </batch-file-upload-dialog>
        <jmx-test-case-upsert v-if="dialogProps.showAddJmxDialog"
                              :id="activeId"
                              :mode="mode"
                              @close="handleCloseAddJmxDialog()">
        </jmx-test-case-upsert>
    </div>
</script>

<script>
    const DICT = {
        STATUS: [
            {
                label: '初始状态',
                value: 1
            },
            {
                label: '正在执行',
                value: 2
            },
            {
                label: '成功执行',
                value: 3
            },
            {
                label: '运行出现异常',
                value: 4
            },
            {
                label: '排队中',
                value: 5
            }
        ],
        PROJECT_TYPE: [
            {
                label: '主页运营平台',
                value: 'virgo'
            }
        ],
    };
    var testCaseOption = {
        width: '100%',
        height: 'auto',
        labelWidth: '120',
        menuWidth: '600',
        index: false,
        border: true,
        selection: false,
        expand: true,
        stripe: false,
        page: true,
        menuAlign: 'right',
        align: 'left',
        menu: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
            {
                label: '自增ID',
                prop: 'id',
                width: '80',
                span: 24,
                search: true,
                visdiplay: false
            },
            {
                label: '测试用例名称',
                prop: 'originName',
                span: 24,
                search: true,
                width: '180'
            },
            {
                label: '所属项目',
                prop: 'projectType',
                span: 24,
                type: 'select',
                search: true,
                dicData: DICT.PROJECT_TYPE
            },
            {
                label: '测试用例文件相对路径',
                prop: 'testCaseFilePath',
                span: 24
            },
            {
                label: '测试报告文件目录相对路径',
                prop: 'reportFileDir',
                span: 24
            },
            {
                label: '状态',
                prop: 'status',
                span: 24,
                width: '100',
                type: 'select',
                search: true,
                dicData: DICT.STATUS
            }
        ]
    };
    Vue.component('jmeter-main', {
        template: '#jmeter-main',
        mixins: [window.ccMixIn.fixHeight],
        data: function () {
            return {
                urls: {
                    projectType: '/v1/dict/getTypes/projectType',
                    //分页数据接口
                    pageList: '/testCase/pageList',
                    stopAll: '/testCase/stopAll',
                    create: '/testCase/create',
                    cancel: '/testCase/cancel',
                    remove: '/testCase/remove',
                    previewPdf: '/testCase/previewPdf?id=',
                    checkBeforePreviewPdf: '/testCase/checkBeforePreviewPdf',
                    getLog: '/testCase/getLog',
                    checkJmeterReady: '/testCase/checkJmeterReady',
                    checkPhantomJsReady: '/testCase/checkPhantomJsReady',
                    checkBeforeDownReport: '/testCase/checkBeforeDownReport',
                    downloadReport: '/testCase/downloadReport?id=',

                },
                dialogOptions: {
                    title: 'JMX操作',
                    visible: true,
                    size: 'full'
                },
                dialogProps: {
                    showUploadJmxDialog: false,
                    showAddJmxDialog: false,
                    showCodeGenDialog: false
                },
                tableOption: {}, // 表格设置属性
                tableData: [], // 表格的数据
                tablePage: 1,
                tableLoading: false,
                tableObj: {},
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                searchForm: {} //表单搜索条件
            };
        },
        created: function () {
            // 初始化数据格式
            var _this = this;
            _this.loadProjectTypeOptions(testCaseOption);
            _this.tableOption = testCaseOption;
            _this.handleList();
        },
        methods: {
            close() {

            },
            handleClose: function () {
                this.dialogProps.showUploadJmxDialog = false;
                this.handleList();
            },
            edit: function (scope) {
                var row = scope.row;
                this.activeId = row.id;
                this.mode = 'edit';
                this.dialogProps.showAddJmxDialog = true;
            },
            copy: function (scope) {
                var row = scope.row;
                this.activeId = row.id;
                this.mode = 'copy';
                this.dialogProps.showAddJmxDialog = true;
            },
            downloadReport: function (scope) {
                var row = scope.row;
                var _this = this;
                _this.ajax(_this.urls.checkBeforeDownReport, {
                    id: row.id
                }, function (data) {
                    if (data.code === '0') {
                        window.open(_this.urls.downloadReport + row.id);
                    } else {
                        _this.$message(data.msg);
                    }
                });
            },
            handleCloseAddJmxDialog: function () {
                this.dialogProps.showAddJmxDialog = false;
                this.handleList();
            },
            handleCodeGenDialog() {
                this.dialogProps.showCodeGenDialog = false
            },
            codeGen: function () {
                this.dialogProps.showCodeGenDialog = true
            },
            uploadJmx: function () {
                this.dialogProps.showUploadJmxDialog = true
            }
            ,
            addJmx: function () {
                this.activeId = undefined;
                this.mode = undefined;
                this.dialogProps.showAddJmxDialog = true
            },
            checkJmeterReady() {
                var _this = this;
                _this.ajax(_this.urls.checkJmeterReady, {}, function (data) {
                    if (data.code === '0') {
                        alert(data.data);
                    } else {
                        _this.$message(data.msg);
                    }
                });
            },
            checkPhantomJsReady() {
                var _this = this;
                _this.ajax(_this.urls.checkPhantomJsReady, {}, function (data) {
                    if (data.code === '0') {
                        alert(data.data);
                    } else {
                        _this.$message(data.msg);
                    }
                });
            },
            stopAll() {
                this.$confirm('是否确认停止所有正在执行的任务', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    this.ajax(this.urls.stopAll, {}, function (data) {
                        if (data.code === '0') {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        } else {
                            this.$message(data.msg);
                        }
                    }.bind(this));
                }.bind(this)).catch(function () {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                }.bind(this));
            },
            previewPdf: function (scope) {
                var row = scope.row;
                var _this = this;
                _this.ajax(_this.urls.checkBeforePreviewPdf, {
                    id: row.id
                }, function (data) {
                    if (data.code === '0') {
                        window.open(_this.urls.previewPdf + row.id);
                    } else {
                        _this.$message(data.msg);
                    }
                });
            }
            ,
            getLog: function (scope) {
                var row = scope.row;
                var _this = this;
                _this.ajax(_this.urls.getLog, {
                    id: row.id
                }, function (data) {
                    if (data.code === '0') {
                        alert(data.data);
                    } else {
                        _this.$message(data.msg);
                    }
                });

            }
            ,
            create: function (scope) {
                var row = scope.row;
                var _this = this;
                _this.ajax(_this.urls.create, {
                    id: row.id
                }, function (data) {
                    if (data.code === '0') {
                        _this.$message({
                            type: 'success',
                            message: '成功!'
                        });
                        _this.handleList();
                    } else {
                        _this.$message(data.msg);
                    }
                });
            }
            ,
            cancel(scope) {
                var row = scope.row;
                var _this = this;
                this.$confirm('是否确认取消执行，自增ID：' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    _this.ajax(_this.urls.cancel, {
                        id: row.id
                    }, function (data) {
                        if (data.code === '0') {
                            _this.$message({
                                type: 'success',
                                message: '取消成功!'
                            });
                            _this.handleList();
                        } else {
                            _this.$message(data.msg);
                        }
                    });
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });

            },
            remove(scope) {
                var row = scope.row;
                var _this = this;
                this.$confirm('是否确认删除，自增ID：' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    _this.ajax(_this.urls.remove, {
                        id: row.id
                    }, function (data) {
                        if (data.code === '0') {
                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            _this.handleList();
                        } else {
                            _this.$message(data.msg);
                        }
                    });
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });

            }
            ,
            /**
             * 初始分页数据
             */
            handleList: function () {
                var _this = this;
                _this.tableLoading = true;
                _this.ajax(_this.urls.pageList, {}, function (data) {
                    if (data.code === '0') {
                        _this.tableData = data.data.rows
                        _this.page.total = data.data.total
                        _this.tableLoading = false

                    } else {
                        _this.tableData = [];
                        _this.tableLoading = false;
                    }
                });
            }
            ,
            /**
             * 刷新
             */
            handleRefresh: function () {
                var _this = this;
                _this.tableLoading = true;
                _this.ajax(_this.urls.pageList, {
                    page: 1
                }, function (data) {
                    if (data.code === '0') {
                        _this.tableData = data.data.rows
                        _this.page = {
                            total: data.data.total,
                            currentPage: 1, // 当前页数
                            pageSize: 10 // 每页显示多少条
                        }
                        _this.tableLoading = false
                        _this.$message({
                            showClose: true,
                            message: '刷新成功',
                            type: 'success'
                        })
                    } else {
                        _this.tableData = [];
                        _this.tableLoading = false;
                    }
                });
            }
            ,
            /**
             * 搜索
             * @param tableForm
             */
            handleSearch: function (searchForm) {
                var _this = this;
                _this.searchForm = searchForm;
                _this.tableLoading = true;
                var searchParams = _this.getSearchParams(searchForm);
                searchParams.page = _this.page.currentPage;
                searchParams.rows = _this.page.pageSize;
                _this.ajax(_this.urls.pageList, searchParams
                        , function (data) {
                            if (data.code === '0') {
                                _this.tableData = data.data.rows
                                _this.page.total = data.data.total
                                _this.tableLoading = false
                            } else {
                                _this.tableData = [];
                                _this.tableLoading = false;
                            }
                        });
            }
            ,
            /**
             * @title 数据更新
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             * @param done 为表单关闭函数
             *
             **/
            handleUpdate: function (row, index, done) {
                var _this = this;
                $.ajax({
                    type: 'POST',
                    url: _this.urls.create,
                    data: JSON.stringify(row),
                    contentType: "application/json; charset=utf-8",
                    success: function (res) {
                        var data = JSON.parse(res);
                        if (data.code === '0') {
                            _this.$message({
                                showClose: true,
                                message: '生成成功',
                                type: 'success'
                            })
                        } else {
                            _this.$message(data.msg);
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
                done()
            },
            handleSize: function (pageSize) {
                this.page.pageSize = pageSize;
                this.handleSearch(this.searchForm);
            },
            handleCurrent: function (currentPage) {
                this.page.currentPage = currentPage;
                this.handleSearch(this.searchForm);
            },
            loadProjectTypeOptions(testCaseOption) {
                this.ajax('/v1/dict/getTypes/projectType', {}, function (data) {
                    if (data.code === '0') {
                        var length = data.data.length;
                        var index = 0;
                        var options = []
                        for (; index < length; index++) {
                            var item = {};
                            item.label = data.data[index].label;
                            item.value = data.data[index].value;
                            options.push(item);
                        }
                        testCaseOption.column[2].dicData = options
                        console.log(JSON.stringify(testCaseOption))
                    } else {
                        this.$message(data.msg);
                    }
                }.bind(this));

            }
        }
        ,
        mounted: function () {

        }
    })
    ;
</script>

